<template>
    <div>
        <div class="topmsg">
            <div class="img">
                <img crossorigin="anonymous" :src="myimg" alt="" />
            </div>
            <div>
                <div class="msgtop">Hi，{{ myname }}欢迎登入</div>
                <div class="msgdetail">
                    <div>手机号码：{{ myphone }}</div>
                    <div class="line"></div>
                    <div>{{ myrolename }}</div>
                </div>
            </div>
        </div>
        <div class="paddingbox">
            <div class="sssj">
                <div class="top">
                    <div class="top_l">
                        <span class="bord">实时数据</span>
                        <span class="gray">统计截止 {{ date }} 24:00</span>
                    </div>
                    <div></div>
                </div>
                <div class="msg"></div>
            </div>
            <div class="sssjinfo" v-show="globalProperties.roleflag === 2">
                <div class="infoitem">
                    <div class="infotop">{{ sssjinfo.payTotalMoney }}</div>
                    <div class="infotext">发薪总和（元）</div>
                </div>
                <div class="infoitem">
                    <div class="infotop">{{ sssjinfo.payCount }}</div>
                    <div class="infotext">发薪笔数（次）</div>
                </div>
                <div class="infoitem">
                    <div class="infotop">{{ sssjinfo.receiveCount }}</div>
                    <div class="infotext">领薪笔数（次）</div>
                </div>
                <div class="infoitem">
                    <div class="infotop">
                        {{ sssjinfo.unclaimedTotalMoney }}
                    </div>
                    <div class="infotext">未领薪金额（元）</div>
                </div>
                <div class="infoitem">
                    <div class="infotop">{{ sssjinfo.unclaimedCount }}</div>
                    <div class="infotext">未领薪人数（人）</div>
                </div>
            </div>
            <div class="box">
                <div class="boxl">
                    <div class="yysj">
                        <div class="top">运营数据</div>
                        <div class="yysjinfo">
                            <div class="infoitem">
                                <div class="topnum">
                                    {{ yysjmsg.performance }}
                                </div>
                                <div class="centertext">业绩额(元）</div>
                                <div
                                    v-show="
                                        yysjmsg.performance <
                                        yysjmsg.lastPerformance
                                    "
                                    class="bottomtext flexbox"
                                >
                                    <span>同比上月</span
                                    ><span style="margin: 0 5px"
                                        >{{
                                            yysjmsg.lastPerformance === 0
                                                ? 0
                                                : (
                                                      ((yysjmsg.performance -
                                                          yysjmsg.lastPerformance) *
                                                          100) /
                                                      yysjmsg.lastPerformance
                                                  ).toFixed(2)
                                        }}%</span
                                    ><img
                                        src="../assets/image/downc.png"
                                        alt=""
                                    />
                                </div>
                                <div
                                    v-show="
                                        yysjmsg.performance >
                                        yysjmsg.lastPerformance
                                    "
                                    class="bottomtext flexbox"
                                    style="color: red"
                                >
                                    <span>同比上月</span
                                    ><span style="margin: 0 5px"
                                        >{{
                                            yysjmsg.lastPerformance === 0
                                                ? 0
                                                : (
                                                      ((yysjmsg.performance -
                                                          yysjmsg.lastPerformance) *
                                                          100) /
                                                      yysjmsg.lastPerformance
                                                  ).toFixed(2)
                                        }}%</span
                                    ><img src="../assets/image/up.png" alt="" />
                                </div>
                            </div>
                            <div class="infoitem">
                                <div class="topnum">
                                    {{ yysjmsg.signCount }}
                                </div>
                                <div class="centertext">签单客户(人）</div>
                                <div
                                    v-show="
                                        yysjmsg.signCount <
                                        yysjmsg.lastSignCount
                                    "
                                    class="bottomtext flexbox"
                                >
                                    <span>同比上月</span
                                    ><span style="margin: 0 5px"
                                        >{{
                                            yysjmsg.lastSignCount === 0
                                                ? 0
                                                : (
                                                      ((yysjmsg.signCount -
                                                          yysjmsg.lastSignCount) *
                                                          100) /
                                                      yysjmsg.lastSignCount
                                                  ).toFixed(2)
                                        }}%</span
                                    ><img
                                        src="../assets/image/downc.png"
                                        alt=""
                                    />
                                </div>
                                <div
                                    v-show="
                                        yysjmsg.signCount >
                                        yysjmsg.lastSignCount
                                    "
                                    class="bottomtext flexbox"
                                    style="color: red"
                                >
                                    <span>同比上月</span
                                    ><span style="margin: 0 5px"
                                        >{{
                                            yysjmsg.lastSignCount === 0
                                                ? 0
                                                : (
                                                      ((yysjmsg.signCount -
                                                          yysjmsg.lastSignCount) *
                                                          100) /
                                                      yysjmsg.lastSignCount
                                                  ).toFixed(2)
                                        }}%</span
                                    ><img src="../assets/image/up.png" alt="" />
                                </div>
                            </div>
                            <div
                                class="infoitem"
                                v-show="globalProperties.roleflag === 2"
                                style="margin-right: 0"
                            >
                                <div class="topnum">
                                    {{ yysjmsg.unSignCount }}
                                </div>
                                <div class="centertext">
                                    注册未签单客户(人）
                                </div>
                                <div
                                    v-show="
                                        yysjmsg.unSignCount <
                                        yysjmsg.lastUnSignCount
                                    "
                                    class="bottomtext flexbox"
                                >
                                    <span>同比上月</span>
                                    <span style="margin: 0 5px"
                                        >{{
                                            yysjmsg.lastUnSignCount === 0
                                                ? 0
                                                : (
                                                      ((yysjmsg.unSignCount -
                                                          yysjmsg.lastUnSignCount) *
                                                          100) /
                                                      yysjmsg.lastUnSignCount
                                                  ).toFixed(2)
                                        }}%</span
                                    ><img
                                        src="../assets/image/downc.png"
                                        alt=""
                                    />
                                </div>
                                <div
                                    v-show="
                                        yysjmsg.unSignCount >
                                        yysjmsg.lastUnSignCount
                                    "
                                    class="bottomtext flexbox"
                                    style="color: red"
                                >
                                    <span>同比上月</span>
                                    <span style="margin: 0 5px"
                                        >{{
                                            yysjmsg.lastUnSignCount === 0
                                                ? 0
                                                : (
                                                      ((yysjmsg.unSignCount -
                                                          yysjmsg.lastUnSignCount) *
                                                          100) /
                                                      yysjmsg.lastUnSignCount
                                                  ).toFixed(2)
                                        }}%</span
                                    ><img src="../assets/image/up.png" alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tdxx">
                        <div class="top">
                            <span>团队信息</span>
                            <div>
                                <span class="detail" @click="torole">详情</span
                                ><img
                                    src="../assets/image/andmore.png"
                                    alt=""
                                />
                            </div>
                        </div>
                        <div class="tdxxinfobox">
                            <div
                                class="infoitem"
                                v-show="globalProperties.roleflag === 1"
                            >
                                <div class="topnum" style="font-size: 16px">
                                    {{ tdmc }}
                                </div>
                                <div class="bottomtext" @click="torole">
                                    <div>团队名称</div>
                                </div>
                            </div>
                            <div class="infoitem">
                                <div
                                    class="topnum"
                                    v-show="cymsg.teamInfoCnt !== 0"
                                >
                                    {{ cymsg.teamInfoCnt
                                    }}<span class="fs12">人</span>
                                </div>
                                <div
                                    class="topnum"
                                    v-show="cymsg.teamInfoCnt === 0"
                                >
                                    --
                                </div>
                                <div class="bottomtext" @click="torole">
                                    <div>团队成员</div>
                                    <img
                                        src="../assets/image/andmore.png"
                                        alt=""
                                    />
                                </div>
                            </div>
                            <div
                                class="infoitem"
                                v-show="globalProperties.roleflag === 2"
                            >
                                <div
                                    class="topnum"
                                    v-show="cymsg.deptGrp !== 0"
                                >
                                    {{ cymsg.deptGrp
                                    }}<span class="fs12">人</span>
                                </div>
                                <div
                                    class="topnum"
                                    v-show="cymsg.deptGrp === 0"
                                >
                                    --
                                </div>
                                <div class="bottomtext" @click="torole">
                                    <div>团队组长</div>
                                    <img
                                        src="../assets/image/andmore.png"
                                        alt=""
                                    />
                                </div>
                            </div>
                            <div
                                class="infoitem"
                                v-show="globalProperties.roleflag === 2"
                            >
                                <div
                                    class="topnum"
                                    v-show="cymsg.deptLeaders !== 0"
                                >
                                    {{ cymsg.deptLeaders
                                    }}<span class="fs12">人</span>
                                </div>
                                <div
                                    class="topnum"
                                    v-show="cymsg.deptLeaders === 0"
                                >
                                    --
                                </div>
                                <div class="bottomtext" @click="torole">
                                    <div>团队主管</div>
                                    <img
                                        src="../assets/image/andmore.png"
                                        alt=""
                                    />
                                </div>
                            </div>
                            <div class="infoitem">
                                <div
                                    class="topnum"
                                    v-show="cymsg.dmsCount !== 0"
                                >
                                    {{ cymsg.dmsCount
                                    }}<span class="fs12 origin">人</span
                                    ><span
                                        class="fs12 origin pointer"
                                        style="margin-left: 8px"
                                        >去分配</span
                                    >
                                </div>
                                <div
                                    class="topnum"
                                    v-show="cymsg.dmsCount === 0"
                                >
                                    --
                                </div>
                                <div class="bottomtext" @click="tolzlist">
                                    <div>离职未分配</div>
                                    <img
                                        src="../assets/image/andmore.png"
                                        alt=""
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="targetbox">
                        <div class="lefttarget">
                            <div
                                style="
                                    background-color: #ebeffe;
                                    padding-top: 16px;
                                    padding-left: 16px;
                                    font-size: 16px;
                                    font-weight: 700;
                                "
                                v-show="globalProperties.roleflag === 2"
                            >
                                总销售指标完成进度
                            </div>
                            <div
                                id="myChart"
                                :style="{ width: '100%', height: '303px' }"
                            ></div>
                            <div class="chartsbottombox">
                                <div
                                    class="box"
                                    style="color: #9497b1"
                                    v-show="globalProperties.roleflag === 2"
                                >
                                    完成人数/任务人数
                                </div>
                                <div
                                    class="box"
                                    v-show="globalProperties.roleflag === 1"
                                >
                                    <div>
                                        完成人数<span class="green">{{
                                            finishnum
                                        }}</span>
                                    </div>
                                    <div>
                                        失败人数<span class="lightyellow">{{
                                            failenum
                                        }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="righttarget"
                            v-show="globalProperties.roleflag === 2"
                        >
                            <div class="top">
                                <div class="bord">团队目标进度</div>
                                <div class="flexcenterbox noneedborder">
                                    <el-date-picker
                                        v-model="dateone"
                                        :clearable="false"
                                        @change="changedateone"
                                        value-format="YYYY-MM"
                                        type="month"
                                        placeholder="请选择"
                                    />
                                    <img
                                        src="../assets/image/down.png"
                                        alt=""
                                    />
                                </div>
                            </div>
                            <div
                                id="myChartc"
                                :style="{ width: '100%', height: '257px' }"
                            ></div>
                        </div>
                        <div
                            class="righttarget"
                            v-show="globalProperties.roleflag === 1"
                        >
                            <div class="top">
                                <div class="bord">团队目标进度</div>
                                <div class="flexcenterbox">
                                    <el-date-picker
                                        v-model="dateone"
                                        :clearable="false"
                                        @change="changedateone"
                                        value-format="YYYY-MM"
                                        type="month"
                                        placeholder="请选择"
                                    />
                                    <img
                                        src="../assets/image/down.png"
                                        alt=""
                                    />
                                </div>
                            </div>
                            <div class="listbox">
                                <div class="listboxitem">
                                    <div class="item_ele">
                                        <div class="item_eletop">
                                            本月开户数
                                        </div>
                                        <div class="item_elecenter">
                                            {{
                                                listdataa === null
                                                    ? '--'
                                                    : listdataa
                                            }}<span>个</span>
                                        </div>
                                        <div class="item_elebottom">
                                            同比上月
                                        </div>
                                    </div>
                                    <div class="item_ele">
                                        <div class="item_eletop">
                                            当前长期在保
                                        </div>
                                        <div class="item_elecenter">
                                            {{
                                                listdatab === null
                                                    ? '--'
                                                    : listdatab
                                            }}<span>个</span>
                                        </div>
                                        <div class="item_elebottom">
                                            同比上月
                                        </div>
                                    </div>
                                    <div class="item_ele">
                                        <div class="item_eletop">
                                            当前在投客户
                                        </div>
                                        <div class="item_elecenter">
                                            {{
                                                listdatac === null
                                                    ? '--'
                                                    : listdatac
                                            }}<span>个</span>
                                        </div>
                                        <div class="item_elebottom">
                                            同比上月
                                        </div>
                                    </div>
                                </div>
                                <div class="listboxitem">
                                    <div class="item_ele">
                                        <div class="item_eletop">总客户数</div>
                                        <div class="item_elecenter">
                                            {{
                                                listdatad === null
                                                    ? '--'
                                                    : listdatad
                                            }}<span>个</span>
                                        </div>
                                        <div class="item_elebottom">
                                            同比上月
                                        </div>
                                    </div>
                                    <div class="item_ele">
                                        <div class="item_eletop">
                                            长期保客户数
                                        </div>
                                        <div class="item_elecenter">
                                            {{
                                                listdatae === null
                                                    ? '--'
                                                    : listdatae
                                            }}<span>个</span>
                                        </div>
                                        <div class="item_elebottom">
                                            同比上月
                                        </div>
                                    </div>
                                    <div class="item_ele">
                                        <div class="item_eletop">
                                            流失客户数
                                        </div>
                                        <div class="item_elecenter">
                                            {{
                                                listdataf === null
                                                    ? '--'
                                                    : listdataf
                                            }}<span>个</span>
                                        </div>
                                        <div class="item_elebottom">
                                            同比上月
                                        </div>
                                    </div>
                                </div>
                                <div class="listboxitem">
                                    <div class="item_ele">
                                        <div class="item_eletop">留存率</div>
                                        <div class="item_elecenter">
                                            {{ listdatag * 100 }}<span>%</span>
                                        </div>
                                        <div class="item_elebottom">
                                            同比上月
                                        </div>
                                    </div>
                                    <div class="item_ele">
                                        <div class="item_eletop">流失率</div>
                                        <div class="item_elecenter">
                                            {{ listdatah * 100 }}<span>%</span>
                                        </div>
                                        <div class="item_elebottom">
                                            同比上月
                                        </div>
                                    </div>
                                    <div class="item_ele">
                                        <div class="item_eletop">投保率</div>
                                        <div class="item_elecenter">
                                            {{ listdatai * 100 }}<span>%</span>
                                        </div>
                                        <div class="item_elebottom">
                                            同比上月
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="boxr">
                    <div class="msgbox">
                        <div class="top">
                            <div class="bord">消息</div>
                            <div class="more" @click="opentc">
                                <span>更多</span
                                ><img
                                    src="../assets/image/andmore.png"
                                    alt=""
                                />
                            </div>
                        </div>
                        <div class="msglist">
                            <div
                                class="msgitem"
                                v-for="(ele, index) in messagelist"
                                :key="index"
                            >
                                <div class="date">
                                    {{
                                        dayjs(ele.createTime.toString()).format(
                                            'YYYY-MM-DD'
                                        )
                                    }}
                                </div>
                                <div
                                    class="blue"
                                    v-show="ele.businessType === 0"
                                >
                                    签单类型
                                </div>
                                <div
                                    class="blue"
                                    v-show="ele.businessType === 1"
                                >
                                    充值类型
                                </div>
                                <div
                                    class="blue"
                                    v-show="ele.businessType === 2"
                                >
                                    续费类型
                                </div>
                                <div
                                    class="blue"
                                    v-show="ele.businessType === 3"
                                >
                                    人员相关
                                </div>
                                <div
                                    class="blue"
                                    v-show="ele.businessType === 4"
                                >
                                    日日保报案
                                </div>
                                <div
                                    class="blue"
                                    v-show="ele.businessType === 5"
                                >
                                    长期保报案
                                </div>
                                <div
                                    class="blue"
                                    v-show="ele.businessType === 6"
                                >
                                    日保上传材料
                                </div>
                                <div
                                    class="blue"
                                    v-show="ele.businessType === 7"
                                >
                                    长期保上传材料
                                </div>
                                <div
                                    class="blue"
                                    v-show="ele.businessType === 8"
                                >
                                    日保派遣单位审核
                                </div>
                                <div
                                    class="blue"
                                    v-show="ele.businessType === 9"
                                >
                                    长期保派遣单位审核
                                </div>
                                <div class="line"></div>
                                <div class="msgtext">
                                    {{
                                        (ele.createUserName === null
                                            ? '--'
                                            : ele.createUserName) +
                                        '跟进的客户' +
                                        ele.companyName
                                    }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="rankinglistbox">
                        <div class="top">
                            <div class="bord">排行榜</div>
                            <div class="more" @click="tophb">
                                <span>查看更多</span
                                ><img
                                    src="../assets/image/andmore.png"
                                    alt=""
                                />
                            </div>
                        </div>
                        <div class="tab">
                            <div
                                :class="{
                                    tabitem: true,
                                    activetab: activetabflag === 0
                                }"
                                @click="changetab(0)"
                            >
                                总业绩
                            </div>
                            <div
                                :class="{
                                    tabitem: true,
                                    activetab: activetabflag === 1
                                }"
                                @click="changetab(1)"
                            >
                                新增保费
                            </div>
                            <div
                                :class="{
                                    tabitem: true,
                                    activetab: activetabflag === 2
                                }"
                                @click="changetab(2)"
                            >
                                总业绩额增长
                            </div>
                        </div>
                        <div class="listinfo" v-if="activetabflag === 0">
                            <div class="toptitle">
                                <div class="one">名次</div>
                                <div class="two">姓名</div>
                                <div class="three">所属分组</div>
                                <div class="four">总业绩</div>
                            </div>
                            <div
                                class="listitem"
                                v-for="(ele, index) in lefttabledate"
                                :key="index"
                            >
                                <div class="one">
                                    <div
                                        :class="{
                                            numone: index === 0,
                                            numtwo: index === 1,
                                            numthree: index === 2,
                                            numfour: index === 3,
                                            num: true
                                        }"
                                    >
                                        {{ index + 1 }}
                                    </div>
                                </div>
                                <div class="two">
                                    <img
                                        crossorigin="anonymous"
                                        :src="ele.salesHeadURL"
                                        alt=""
                                    />
                                    {{ ele.saleName }}
                                </div>
                                <div class="three">{{ ele.deptName }}</div>
                                <div class="four price">
                                    ¥{{ ele.totalPerformance }}
                                </div>
                            </div>
                        </div>
                        <div class="listinfo" v-if="activetabflag === 1">
                            <div class="toptitle">
                                <div class="one">名次</div>
                                <div class="two">姓名</div>
                                <div class="three">所属分组</div>
                                <div class="four">总业绩</div>
                            </div>
                            <div
                                class="listitem"
                                v-for="(ele, index) in righttabledate"
                                :key="index"
                            >
                                <div class="one">
                                    <div
                                        :class="{
                                            numone: index === 0,
                                            numtwo: index === 1,
                                            numthree: index === 2,
                                            numfour: index === 3,
                                            num: true
                                        }"
                                    >
                                        {{ index + 1 }}
                                    </div>
                                </div>
                                <div class="two">
                                    <img
                                        crossorigin="anonymous"
                                        :src="ele.salesHeadURL"
                                        alt=""
                                    />
                                    {{ ele.saleName }}
                                </div>
                                <div class="three">{{ ele.deptName }}</div>
                                <div class="four price">
                                    ¥{{ ele.totalPerformance }}
                                </div>
                            </div>
                        </div>
                        <div class="listinfo" v-if="activetabflag === 2">
                            <div class="toptitle">
                                <div class="one">名次</div>
                                <div class="two">姓名</div>
                                <div class="three">所属分组</div>
                                <div class="four">总业绩</div>
                            </div>
                            <div
                                class="listitem"
                                v-for="(ele, index) in righttabledatezz"
                                :key="index"
                            >
                                <div class="one">
                                    <div
                                        :class="{
                                            numone: index === 0,
                                            numtwo: index === 1,
                                            numthree: index === 2,
                                            numfour: index === 3,
                                            num: true
                                        }"
                                    >
                                        {{ index + 1 }}
                                    </div>
                                </div>
                                <div class="two">
                                    <img
                                        crossorigin="anonymous"
                                        :src="ele.salesHeadURL"
                                        alt=""
                                    />
                                    {{ ele.saleName }}
                                </div>
                                <div class="three">{{ ele.deptName }}</div>
                                <div class="four price">
                                    ¥{{ ele.totalPerformance }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-drawer
            v-model="tcflag"
            class="drawer"
            title="消息"
            direction="rtl"
            :size="isMobile ? '100%' : '30%'"
        >
            <template #header="{ close, titleId, titleClass }">
                <div class="messageselect">
                    <h4 :id="titleId" :class="titleClass">消息</h4>
                    <el-select
                        v-model="selectmessagetype"
                        class="m-2"
                        placeholder="Select"
                        @change="getmessagelist"
                        size="small"
                        style="width: 200px"
                    >
                        <el-option
                            v-for="item in messagetypeoptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </template>
            <div class="closedrawer" @click="tcflag = false">
                <span>收</span><span>起</span
                ><img src="../assets/image/组355.png" alt="" />
            </div>
            <div class="tcbox">
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 0 && ele.status === 1"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">成单通知</div>
                    <div class="msginfo">
                        <div class="cdmsg">
                            你跟进的客户
                            <span class="bord">{{ ele.companyName }}</span>
                            开通了
                            <span v-show="ele.amtProduct === 0" class="bord"
                                >「子弹发薪」</span
                            >
                            <span v-show="ele.amtProduct === 1" class="bord"
                                >「电子签」</span
                            >
                            <span v-show="ele.amtProduct === 2" class="bord"
                                >「日日保」</span
                            >
                            <span v-show="ele.amtProduct === 3" class="bord"
                                >「长期保」</span
                            >
                            <span v-show="ele.amtProduct === 4" class="bord"
                                >「微聘」</span
                            >
                            <span v-show="ele.amtProduct === 5" class="bord"
                                >「微保」</span
                            >
                            <span v-show="ele.amtProduct === 6" class="bord"
                                >「团意日保」</span
                            >
                            <span v-show="ele.amtProduct === 7" class="bord"
                                >「短信群发」</span
                            >
                            服务；
                        </div>
                        <div class="lablebox">
                            <div class="lable">操作人：</div>
                            <div class="lablecontent">
                                {{
                                    ele.createUserName
                                        ? ele.createUserName
                                        : '--'
                                }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">操作时间：</div>
                            <div class="lablecontent">
                                {{
                                    dayjs(ele.createTime.toString()).format(
                                        'YYYY-MM-DD HH:mm:ss'
                                    )
                                }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 0 && ele.status === 0"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">关闭服务通知</div>
                    <div class="msginfo">
                        <div class="cdmsg">
                            你跟进的客户
                            <span class="bord">{{ ele.companyName }}</span>
                            关闭了
                            <span v-show="ele.amtProduct === 0" class="bord"
                                >「子弹发薪」</span
                            >
                            <span v-show="ele.amtProduct === 1" class="bord"
                                >「电子签」</span
                            >
                            <span v-show="ele.amtProduct === 2" class="bord"
                                >「日日保」</span
                            >
                            <span v-show="ele.amtProduct === 3" class="bord"
                                >「长期保」</span
                            >
                            <span v-show="ele.amtProduct === 4" class="bord"
                                >「微聘」</span
                            >
                            <span v-show="ele.amtProduct === 5" class="bord"
                                >「微保」</span
                            >
                            <span v-show="ele.amtProduct === 6" class="bord"
                                >「团意日保」</span
                            >
                            <span v-show="ele.amtProduct === 7" class="bord"
                                >「短信群发」</span
                            >
                            服务；
                        </div>
                        <div class="lablebox">
                            <div class="lable">操作人：</div>
                            <div class="lablecontent">
                                {{
                                    ele.createUserName
                                        ? ele.createUserName
                                        : '--'
                                }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">操作时间：</div>
                            <div class="lablecontent">
                                {{
                                    dayjs(ele.createTime.toString()).format(
                                        'YYYY-MM-DD HH:mm:ss'
                                    )
                                }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 2"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">续费通知</div>
                    <div class="msginfo">
                        <div class="cdmsg">
                            你跟进的客户
                            <span class="bord">{{ ele.companyName }}</span>
                            续费了
                            <span v-show="ele.amtProduct === 0" class="bord"
                                >「子弹发薪」</span
                            >
                            <span v-show="ele.amtProduct === 1" class="bord"
                                >「电子签」</span
                            >
                            <span v-show="ele.amtProduct === 2" class="bord"
                                >「日日保」</span
                            >
                            <span v-show="ele.amtProduct === 3" class="bord"
                                >「长期保」</span
                            >
                            <span v-show="ele.amtProduct === 4" class="bord"
                                >「微聘」</span
                            >
                            <span v-show="ele.amtProduct === 5" class="bord"
                                >「微保」</span
                            >
                            <span v-show="ele.amtProduct === 6" class="bord"
                                >「团意日保」</span
                            >
                            <span v-show="ele.amtProduct === 7" class="bord"
                                >「短信群发」</span
                            >
                            服务；
                        </div>
                        <div class="lablebox">
                            <div class="lable">操作人：</div>
                            <div class="lablecontent">
                                {{
                                    ele.createUserName
                                        ? ele.createUserName
                                        : '--'
                                }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">操作时间：</div>
                            <div class="lablecontent">
                                {{
                                    dayjs(ele.createTime.toString()).format(
                                        'YYYY-MM-DD HH:mm:ss'
                                    )
                                }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 1"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">客户付款通知</div>
                    <div class="fkbox">
                        <div class="fkjetext">付款金额</div>
                        <div class="fkjenum">¥{{ ele.amount }}</div>
                    </div>
                    <div class="msginfo">
                        <div class="lablebox">
                            <div class="lable">付款客户：</div>
                            <div class="lablecontent">
                                {{ ele.companyName }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">付款方式：</div>
                            <div class="lablecontent">{{ ele.msgContent }}</div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">收款账户：</div>
                            <div class="lablecontent">{{ ele.bankName }}</div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">收款汇总：</div>
                            <div class="lablecontent">
                                当日收款{{ ele.totalCnt }}笔，共<span
                                    class="lightyellow"
                                    >{{ ele.totalAmt }}</span
                                >元
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 3"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">离职交接通知</div>
                    <div class="msginfo">
                        <div class="cdmsg">
                            已将
                            <span class="bord">韩翠花</span>
                            的所有数据交接给<span class="bord">肖战</span>
                            ，生效时间为
                            <span class="bord">2022年08月16日</span> ；
                        </div>
                        <div class="lablebox">
                            <div class="lable">操作人：</div>
                            <div class="lablecontent">
                                {{
                                    ele.createUserName
                                        ? ele.createUserName
                                        : '--'
                                }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">操作时间：</div>
                            <div class="lablecontent">
                                {{
                                    dayjs(ele.createTime.toString()).format(
                                        'YYYY-MM-DD HH:mm:ss'
                                    )
                                }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 4"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">
                        <span>日日保报案</span
                        ><span
                            class="dark"
                            @click="tomessagedetail(ele.businessType)"
                            >查看详情<img
                                class="moreimg"
                                src="../assets/image/andmore.png"
                                alt=""
                        /></span>
                    </div>
                    <div class="msginfo" v-if="ele.businessMsg">
                        <div class="cdmsg">
                            {{
                                ele.businessMsg[0] === 'null'
                                    ? '--'
                                    : ele.businessMsg[0]
                            }}
                        </div>
                        <div class="lablebox">
                            <div class="lable">派遣单位：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[1] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">出险人：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[2] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">出险时间：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[3] }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 5"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">
                        <span>长期保报案</span
                        ><span
                            class="dark"
                            @click="tomessagedetail(ele.businessType)"
                            >查看详情<img
                                class="moreimg"
                                src="../assets/image/andmore.png"
                                alt=""
                        /></span>
                    </div>
                    <div class="msginfo" v-if="ele.businessMsg">
                        <div class="cdmsg">
                            {{
                                ele.businessMsg[0] === 'null'
                                    ? '--'
                                    : ele.businessMsg[0]
                            }}
                        </div>
                        <div class="lablebox">
                            <div class="lable">派遣单位：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[1] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">出险人：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[2] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">出险时间：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[3] }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 6"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">
                        <span>日保上传材料</span
                        ><span
                            class="dark"
                            @click="tomessagedetail(ele.businessType)"
                            >查看详情<img
                                class="moreimg"
                                src="../assets/image/andmore.png"
                                alt=""
                        /></span>
                    </div>
                    <div class="msginfo" v-if="ele.businessMsg">
                        <div class="cdmsg">
                            {{
                                ele.businessMsg[0] === 'null'
                                    ? '--'
                                    : ele.businessMsg[0]
                            }}
                        </div>
                        <div class="lablebox">
                            <div class="lable">出险人：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[1] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">出险时间：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[2] }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 7"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">
                        <span>长期保上传材料</span
                        ><span
                            class="dark"
                            @click="tomessagedetail(ele.businessType)"
                            >查看详情<img
                                class="moreimg"
                                src="../assets/image/andmore.png"
                                alt=""
                        /></span>
                    </div>
                    <div class="msginfo" v-if="ele.businessMsg">
                        <div class="cdmsg">
                            {{
                                ele.businessMsg[0] === 'null'
                                    ? '--'
                                    : ele.businessMsg[0]
                            }}
                        </div>
                        <div class="lablebox">
                            <div class="lable">出险人：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[1] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">出险时间：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[2] }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 8"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">
                        <span>日保派遣单位审核</span
                        ><span
                            class="dark"
                            @click="tomessagedetail(ele.businessType)"
                            >查看详情<img
                                class="moreimg"
                                src="../assets/image/andmore.png"
                                alt=""
                        /></span>
                    </div>
                    <div class="msginfo" v-if="ele.businessMsg">
                        <div class="cdmsg">
                            {{
                                ele.businessMsg[0] === 'null'
                                    ? '--'
                                    : ele.businessMsg[0]
                            }}
                        </div>
                        <div class="lablebox">
                            <div class="lable">派遣单位：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[1] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">审核状态：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[2] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">保险类型：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[3] }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 9"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">
                        <span>长期保派遣单位审核</span
                        ><span
                            class="dark"
                            @click="tomessagedetail(ele.businessType)"
                            >查看详情<img
                                class="moreimg"
                                src="../assets/image/andmore.png"
                                alt=""
                        /></span>
                    </div>
                    <div class="msginfo" v-if="ele.businessMsg">
                        <div class="cdmsg">
                            {{
                                ele.businessMsg[0] === 'null'
                                    ? '--'
                                    : ele.businessMsg[0]
                            }}
                        </div>
                        <div class="lablebox">
                            <div class="lable">派遣单位：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[1] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">审核状态：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[2] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">保险类型：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[3] }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <div class="tcfooter">
                    <el-pagination
                        :current-page="currentPage"
                        :page-size="pageSize"
                        :page-sizes="[10, 30, 50]"
                        layout="total, sizes, prev, pager, next"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script lang="ts" setup>
import {
    ref,
    reactive,
    computed,
    watch,
    onMounted,
    getCurrentInstance
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'
const isMobile = ref((window as any).isMobile)

const tomessagedetail = (i: any) => {
    console.log(i)
    if (i === 4 || i === 5) {
        tobacl()
    } else if (i === 7 || i === 6) {
        tobacl()
    } else if (i === 8 || i === 9) {
        topqdwsp()
    }
}
const topqdwsp = () => {
    router.push({ path: '/approval', query: { current: 0 } })
}
const tobacl = () => {
    router.push({ path: '/reportClaimAdjuster' })
}
const {
    emit,
    appContext: {
        app: {
            config: { globalProperties }
        }
    }
} = getCurrentInstance()
import {
    getmessagelistapi,
    getqueryrankinglistallapi,
    getqueryrankinglistinsurapi,
    getcrmpaysalarystatisticsapi,
    getqueryriserankinglistallapi,
    getcrmoperatestatisticsapi,
    getuserinfoapi,
    getcrmteaminfoapi,
    gettaskscheduleapi
} from '../api/api'
import dayjs from 'dayjs'
import { getDataBoardapi } from '../api/teamtarget/teamtarget'

console.log(22222, globalProperties.roleflag)

// console.log(dayjs().subtract(1, 'day').format('YYYY-MM-DD'))
console.log(11111, dayjs('20230824191722').format('YYYY-MM-DD HH:mm:ss'))
const torole = () => {
    router.push({ path: '/role' })
}
const tolzlist = () => {
    router.push({ path: '/Departingmembers' })
}
const currentPage=ref(1)
const pageSize = ref(10)
const total = ref(0)
const handleSizeChange = (val: any) => {
    console.log(val)
    pageSize.value = val
    currentPage.value = 1
    getmessagelist()
}
const handleCurrentChange=(val: any) => {
    console.log(val)
    currentPage.value = val
    getmessagelist()
}
const selectmessagetype = ref('')
const messagetypeoptions = ref<any>([
    { label: '全部', value: '' },
    { label: '案件资料上传', value: '1' },
    { label: '充值审核', value: '2' },
    { label: '派遣单位审批', value: '3' }
])
const getmessagelist = () => {
    getmessagelistapi({
        pageSize: pageSize.value,
        pageNum: currentPage.value,
        queryBusinessType: selectmessagetype.value
    }).then((res: any) => {
        console.log(res, '消息列表')
        messagelist.value = res.rows
        messagelist.value.forEach((ele: any, i: any) => {
            if (ele.businessMsg !== null) {
                ele.businessMsg = ele.businessMsg.split(';')
            }
        })
        total.value = res.total
    })
}
const messagelist = ref<any>([])
const getqueryrankinglistall = () => {
    getqueryrankinglistallapi({ month: datephb.value }).then((res: any) => {
        console.log(res, '总业绩排行榜')
        lefttabledate.value = res.list
        leftkh.value = res.customers
        leftqd.value = res.dealCount
        leftzyj.value = res.totalPerformance
    })
}
const leftkh = ref(0)
const leftqd = ref(0)
const leftzyj = ref(0)
const getqueryrankinglistinsur = () => {
    getqueryrankinglistinsurapi({ month: datephb.value }).then((res: any) => {
        console.log(res, '长期保进步榜排行榜')
        righttabledate.value = res.list
        rightkh.value = res.customers
        rightqd.value = res.dealCount
        rightzyj.value = res.totalPerformance
    })
}

const getqueryriserankinglistall = () => {
    getqueryriserankinglistallapi({ month: datephb.value }).then((res: any) => {
        console.log(res, '长期保进步榜排行榜')
        righttabledatezz.value = res.list
    })
}
const datephb = ref('')
const rightkh = ref(0)
const rightqd = ref(0)
const rightzyj = ref(0)
const lefttabledate = ref<any>([])
const righttabledate = ref<any>([])
const righttabledatezz = ref<any>([])
const gettaskschedule = () => {
    gettaskscheduleapi({ queryMonth: dateone.value }).then((res: any) => {
        console.log(res, '任务进度')
        failenum.value = res.taskStatistics.failNumber
        finishnum.value = res.taskStatistics.completeNumber
        fulfillmentOfSchedule.value = Math.ceil(
            (res.taskStatistics.completeNumber /
                res.taskStatistics.taskNumber) *
                100
        )
        console.log(fulfillmentOfSchedule.value)
        const bfb = res.taskProgress.map((ele: any, i: any) => {
            return {
                value: Math.ceil(
                    (ele.completionValue / ele.deptTaskValue) * 100
                ),
                finishCount: ele.finishCount,
                notFinishCount: ele.deptTaskValue,
                title: ele.taskName
            }
        })
        const dept = res.taskProgress.map((ele: any, i: any) => {
            return ele.deptName
        })
        myChart.setOption(
            createOption(
                res.taskStatistics.completeNumber,
                res.taskStatistics.taskNumber
            )
        )
        myChartc.setOption(createOptionc(bfb, dept))
    })
}
const finishnum = ref<any>(null)
const failenum = ref<any>(null)
const fulfillmentOfSchedule = ref(100)
const getcrmteaminfo = () => {
    getcrmteaminfoapi().then((res: any) => {
        console.log(res, '首页-成员信息')
        cymsg.deptLeaders = res.deptLeaders
        cymsg.deptGrp = res.deptGrp
        cymsg.teamInfoCnt = res.teamInfoCnt
        cymsg.dmsCount = res.dmsCount
    })
}
const tdmc = ref('')
const cymsg = reactive({
    deptLeaders: 0,
    deptGrp: 0,
    teamInfoCnt: 0,
    dmsCount: 0
})
const getcrmoperatestatistics = () => {
    getcrmoperatestatisticsapi().then((res: any) => {
        console.log(res, '首页-运营数据')
        yysjmsg.performance = res.performance
        yysjmsg.signCount = res.signCount
        yysjmsg.lastPerformance = res.lastPerformance
        yysjmsg.lastSignCount = res.lastSignCount
        yysjmsg.unSignCount = res.unSignCount
        yysjmsg.lastUnSignCount = res.lastUnSignCount
    })
}
const yysjmsg = reactive<any>({
    performance: '',
    signCount: '',
    lastPerformance: '',
    lastSignCount: '',
    unSignCount: '',
    lastUnSignCount: ''
})
const getcrmpaysalarystatistics = () => {
    getcrmpaysalarystatisticsapi().then((res: any) => {
        console.log(res, '首页-实时数据')
        sssjinfo.unclaimedTotalMoney = res.unclaimedTotalMoney
        sssjinfo.unclaimedCount = res.unclaimedCount
        sssjinfo.receiveTotalMoney = res.receiveTotalMoney
        sssjinfo.payTotalMoney = res.payTotalMoney
        sssjinfo.payCount = res.payCount
        sssjinfo.receiveCount = res.receiveCount
    })
}
const sssjinfo = reactive<any>({
    unclaimedTotalMoney: '',
    unclaimedCount: '',
    receiveTotalMoney: '',
    payTotalMoney: '',
    payCount: '',
    receiveCount: ''
})
const date = ref('')
const getuserinfo = () => {
    getuserinfoapi().then((res: any) => {
        console.log(res, '个人信息')
        myname.value = res.user.nickName
        myimg.value = res.user.avatar
        myphone.value = res.user.phonenumber
        myisadmin.value = res.user.isCrmPcAdmin
        myrolename.value = res.user.roles[0].roleName
        tdmc.value = res.user.dept.deptName
    })
}
const myimg = ref('')
const myrolename = ref('')
const myname = ref('')
const myphone = ref('')
const myisadmin = ref(0)
const getDataBoard = () => {
    getDataBoardapi({ queryMonth: dateone.value }).then((res: any) => {
        console.log(res, 'resresres')
        listdataa.value = res.openCount
        listdatab.value = res.periodUnderWarranty
        listdatac.value = res.insureCustomersCount
        listdatad.value = res.customersCountNow
        listdatae.value = res.periodCustomersCount
        listdataf.value = res.runCustomersCount
        listdatag.value = res.retentionRate
        listdatah.value = res.turnoverRate
        listdatai.value = res.insureRate
    })
}
const listdataa = ref<any>(null)
const listdatab = ref<any>(null)
const listdatac = ref<any>(null)
const listdatad = ref<any>(null)
const listdatae = ref<any>(null)
const listdataf = ref<any>(null)
const listdatag = ref<any>(null)
const listdatah = ref<any>(null)
const listdatai = ref<any>(null)
onMounted(() => {
    const y = new Date().getFullYear()
    const m: any =
        new Date().getMonth() + 1 >= 10
            ? new Date().getMonth() + 1
            : '0' + (new Date().getMonth() + 1)
    const d: any =
        new Date().getDate() - 1 >= 10
            ? new Date().getDate() - 1
            : '0' + (new Date().getDate() - 1)
    console.log(y, m, d)
    datephb.value = `${y}-${m}`
    date.value = dayjs().subtract(1, 'day').format('YYYY-MM-DD')//`${y}-${m}-${d}`;
    dateone.value = `${y}-${m}`
    // getuserinfoapi().then((res:any) => {
    //   sessionStorage.setItem("userid", res.user.userId);
    //   sessionStorage.setItem("img", res.user.avatar);
    //   sessionStorage.setItem("name", res.user.nickName);
    //   sessionStorage.setItem("isGrpLead", res.user.isGrpLead);
    //   sessionStorage.setItem("isSupPcAdmin", res.user.isSupPcAdmin);
    // })
    initeCharts()
    initeChartsc()
    getqueryrankinglistinsur()
    getqueryrankinglistall()
    getqueryriserankinglistall()
    getcrmoperatestatistics()
    getcrmpaysalarystatistics()
    getuserinfo()
    gettaskschedule()
    getcrmteaminfo()
    getmessagelist()
    if (globalProperties.roleflag === 1) {
        getDataBoard()        
    }
})
let myChart: any = null
const initeCharts = () => {
    myChart = echarts.init(document.getElementById('myChart'))
}
let myChartc: any = null
const initeChartsc = () => {
    myChartc = echarts.init(document.getElementById('myChartc'))
}
const opentc = () => {
    getmessagelist()
    tcflag.value = true
}
const tcflag = ref(false)
const router = useRouter()
const route = useRoute()
const dateflag = ref(2)
const changedateone = (val: any) => {
    gettaskschedule()
    getDataBoard()
}
const dateone = ref('')
const changedate = (i: number) => {
    dateflag.value = i
}
const changetab = (i: number) => {
    activetabflag.value = i
}
const tophb = () => {
    router.push({ path: '/rankinglist' })
}
const activetabflag = ref(0)

const createOptionc = (bfbarr: any, deptarr: any) => {
    const optionc = {
        backgroundColor: '#ffffff',
        grid: {
            left: '0%',
            right: '1%',
            bottom: '16px',
            top: '0%',
            containLabel: true
        },
        tooltip: {
            show: true,
            // formatter: "长期在保新增111人<br/>完成人数：{a}<br/>未完成数：{b}% <br/>{c}{d}{e}",
            formatter: (params: any) => {
                console.log(params, '1111111111111111111111111111')
                return `
            <div>${params.data.title}</div>
            <div>完成人数：<span style="color: #00D679;">${params.data.finishCount}</span></div>
            <div>未完成数：<span style="color: #FF7642;">${params.data.notFinishCount}</span></div>
        `
            },
            textStyle: {
                fontWeight: 'bold',
                fontSize: 14
            },
            axisPointer: {
                type: 'shadow'
            }
        },
        yAxis: [
            {
                type: 'category',
                inverse: true,
                axisLabel: {
                    show: true,
                    color: '#9497B1',
                    fontSize: 14
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#707070'
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#707070',
                        width: 1
                    }
                },
                axisTick: {
                    show: false
                },
                data: deptarr
            }
        ],
        xAxis: [
            {
                type: 'value',
                axisTick: {
                    show: false
                },
                max: 100,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#707070',
                        width: 1
                    }
                },
                splitLine: {
                    show: false
                },
                nameTextStyle: {
                    color: '#f7113a'
                },
                // nameLocation: "end",
                name: '',
                axisLabel: {
                    show: true,
                    inside: false,
                    textStyle: {
                        color: '#9497B1',
                        fontSize: 17
                    },
                    interval: 0,
                    // rotate: 25,
                    formatter: '{value}%'
                }
            }
        ],
        dataZoom: [
            // {
            //   id: 'dataZoomX',
            //   type: 'slider',
            //   xAxisIndex: [0],
            //   filterMode: 'filter',
            //   bottom: "1%",
            //   height: "10"
            // },
            {
                id: 'dataZoomY',
                type: 'slider',
                yAxisIndex: [0],
                filterMode: 'empty',
                right: '0',
                height: '85%',
                width: '10'
            }
        ],
        series: [
            {
                name: 'assist',
                type: 'bar',
                stack: '1',
                itemStyle: {
                    normal: {
                        barBorderColor: 'rgba(0,0,0,0)',
                        color: 'rgba(0,0,0,0)'
                    },
                    emphasis: {
                        barBorderColor: 'rgba(0,0,0,0)',
                        color: 'rgba(0,0,0,0)'
                    }
                },
                tooltip: {
                    trigger: 'none'
                },
                data: []
            }, //设置两个柱状图进行重叠，第一层柱子设置透明度,由此来实现柱子与坐标轴之间的距离  stack:''设置重叠效果
            {
                type: 'bar',
                stack: '1',
                showBackground: true,
                barWidth: 12,
                barBorderRadius: 30,
                itemStyle: {
                    normal: {
                        barBorderRadius: 20,
                        color: function (params: any) {
                            // console.log('测试',_that.checkName)
                            // if (_that.platName == params.name) {
                            //    return 'yellow';
                            // } else {
                            return {
                                type: 'linear',
                                x: 1,
                                y: 0,
                                x2: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#80BDF6' // 0% 处的颜色
                                    },
                                    {
                                        offset: 0.9,
                                        color: '#1A64FD' // 100% 处的颜色
                                    }
                                ]
                                // }
                            }
                        }
                    }
                },
                // zlevel: 2,
                data: bfbarr
            }
        ]
    }
    return optionc
}

const createOption = (val: any, max: any) => {
    const chartOption = {
        backgroundColor: '#ebeffe',
        series: [
            {
                type: 'gauge',
                progress: {
                    show: true,
                    width: 15,
                    roundCap: true
                },
                radius: '90%',
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 15
                    },
                    roundCap: true,
                    cap: 'round'
                },
                center: ['50%', '60%'],
                startAngle: 200,
                endAngle: -20,
                axisTick: {
                    show: true,
                    distance: 15,
                    length: 2,
                    splitNumber: 2,
                    lineStyle: {
                        width: 3,
                        color: '#9EAFFA',
                        cap: 'round'
                    }
                },
                splitLine: {
                    show: false,
                    distance: 10
                },
                axisLabel: {
                    show: globalProperties.roleflag === 1, //false
                    distance: 25,
                    borderDashOffset: 100,
                    color: '#9EAFFA'
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#627CFC'
                        },
                        {
                            offset: 1,
                            color: '#0256FF'
                        }
                    ])
                },
                anchor: {
                    show: true,
                    showAbove: true,
                    size: 35,
                    itemStyle: {
                        color: '#73BFFD',
                        borderColor: '#fff',
                        borderWidth: 10,
                        shadowColor: 'rgba(0,0,0,0.1)',
                        shadowBlur: 20
                    }
                },
                title: {
                    show: true
                },
                pointer: {
                    width: 10,
                    length: '50%',
                    itemStyle: {
                        color: '#73BFFD'
                    }
                },
                detail: {
                    valueAnimation: true,
                    fontSize: 32,
                    color: '#3E5FF5',
                    offsetCenter: [0, '70%'],
                    formatter(val: any) {
                        if (globalProperties.roleflag === 1) {
                            return (val || 0) + '人'
                        } else {
                            const maxNum = val >= 0 ? max || 0 : 1000
                            const percentage = max
                                ? ((val / max) * 100).toFixed(0)
                                : 0
                            return val + '/' + maxNum
                            // console.log(11111111, val);
                            // roleflag === 1 ?  : '{value} %'
                        }
                    }
                },
                max: max || 0,
                data: [
                    {
                        value: val || 0
                    }
                ]
            }
        ]
    }
    return chartOption
}
</script>

<style lang="scss" scoped>
.listbox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .listboxitem {
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;

        .item_ele {
            height: 90px;
            box-sizing: border-box;
            padding: 12px 16px;
            background-color: #fafafc;
            border-radius: 8px;
            margin: 5px;
            flex: 1;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            .item_eletop {
                font-size: 14px;
                color: #9497b1;
            }

            .item_elecenter {
                font-size: 20px;
                color: #202536;

                span {
                    color: #565868;
                    font-size: 12px;
                }
            }

            .item_elebottom {
                color: #9497b1;
                font-size: 12px;

                .green {
                    color: #00d679;
                    font-size: 12px;
                }

                .red {
                    color: #fc2a42;
                    font-size: 12px;
                }
            }
        }
    }
}

.drawer {
    .closedrawer {
        cursor: pointer;
        position: fixed;
        top: 50px;
        right: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 59px;
        background-color: #0256ff;
        font-size: 14px;
        color: #ffffff;

        img {
            margin-top: 5px;
        }
    }
}

.targetbox {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 8px;
    margin-top: 16px;
    display: flex;

    .righttarget {
        padding: 0 16px;
        box-sizing: border-box;
        flex: 1;

        .top {
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .bord {
                font-size: 16px;
                color: #202536;
                font-weight: 700;
            }
        }
    }

    .lefttarget {
        width: 300px;
    }
}

.rankinglistbox {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    margin-top: 16px;
    background-color: #ffffff;
    border-radius: 8px;

    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .bord {
            font-size: 16px;
            font-weight: 700;
            color: #202536;
        }

        .more {
            font-size: 12px;
            color: #9497b1;
            cursor: pointer;

            img {
                margin-left: 5px;
            }
        }
    }

    .listinfo {
        height: 435px;
        overflow-y: auto;
        width: 100%;
        box-sizing: border-box;

        .toptitle {
            height: 42px;
            line-height: 42px;
            color: #9497b1;
            font-size: 14px;
        }

        .listitem {
            height: 56px;
            line-height: 56px;
            font-size: 14px;

            .num {
                width: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                border-radius: 50%;
            }

            .numone {
                background-color: red;
                color: #ffffff;
            }

            .numtwo {
                background-color: #ff7642;
                color: #ffffff;
            }

            .numthree {
                background-color: #ffa814;
                color: #ffffff;
            }

            .numfour {
                background-color: #9497b1;
                color: #ffffff;
            }
        }

        .listitem:hover {
            background-color: #ebeffe;
        }

        .listitem,
        .toptitle {
            width: 100%;
            box-sizing: border-box;
            display: flex;

            .one {
                display: flex;
                align-items: center;
                text-align: center;
                justify-content: center;
                flex: 2;
            }

            .two {
                text-align: center;
                flex: 3;
                display: flex;
                align-items: center;

                img {
                    width: 32px;
                    height: 32px;
                    border-radius: 4px;
                    margin-right: 6px;
                }
            }

            .three {
                text-align: center;
                flex: 2;
            }

            .four {
                text-align: center;
                flex: 4;
            }

            .price {
                color: #ff7642;
            }
        }
    }

    .tab {
        display: flex;
        width: 100%;
        height: 46px;
        align-items: center;
        border-bottom: 1px solid #f4f4f7;

        .tabitem {
            min-width: 42px;
            text-align: center;
            margin-right: 32px;
            font-size: 14px;
            color: #9497b1;
            height: 100%;
            line-height: 46px;
            cursor: pointer;
        }
    }
}

.activetab {
    color: #3e5ff5 !important;
}

.blue {
    color: #3e5ff5;
}

.msgbox {
    background-color: #ffffff;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px;

    .msglist {
        height: 125px;
        overflow-y: scroll;

        .msgitem {
            cursor: pointer;
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 14px;
            margin-bottom: 12px;

            .date {
                margin-right: 5px;
            }

            .line {
                width: 1px;
                background-color: #3d3d3d;
                height: 14px;
                margin: 0 5px;
            }

            .msgtext {
                flex: 1;
                flex-shrink: 0;
                overflow: hidden; //超出的文本隐藏
                text-overflow: ellipsis; //溢出用省略号显示
                white-space: nowrap; //溢出不换行
            }
        }
    }

    .top {
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .bord {
            font-weight: 700;
            font-size: 16px;
        }

        .more {
            cursor: pointer;
            color: #9497b1;
            font-size: 12px;

            img {
                margin-left: 5px;
            }
        }
    }
}

.fs12 {
    font-size: 12px;
}

.origin {
    color: #ff7642;
}

.tdxx {
    margin-top: 16px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 16px;
    background-color: #ffffff;

    .top {
        font-size: 16px;
        font-weight: 700;
        display: flex;
        justify-content: space-between;

        .detail {
            color: #9497b1;
            font-size: 14px;
            font-weight: 400;
            margin-right: 5px;
            cursor: pointer;
        }
    }

    .tdxxinfobox {
        margin-top: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .infoitem {
            flex: 1;
            flex-shrink: 0;

            .topnum {
                font-size: 24px;
                font-weight: 700;
                color: #202536;
            }

            .bottomtext {
                cursor: pointer;
                margin-top: 6px;
                display: flex;
                align-items: center;
                color: #9497b1;
                font-size: 14px;

                img {
                    margin-left: 5px;
                    height: 12px;
                }
            }
        }
    }
}

.yysj {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;

    .top {
        font-size: 16px;
        font-weight: 700;
    }

    .yysjinfo {
        margin-top: 16px;
        display: flex;
        align-items: center;

        .infoitem {
            padding: 24px 16px;
            box-sizing: border-box;
            margin-right: 16px;
            height: 124px;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            flex: 1;
            background-color: #fafafc;
            border-radius: 4px;

            .bottomtext {
                font-size: 12px;
                color: #00d679;
            }

            .centertext {
                font-size: 14px;
                color: #9497b1;
            }

            .topnum {
                font-size: 24px;
                font-weight: 700;
            }
        }
    }
}

.box {
    margin-top: 16px;
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    display: flex;

    .boxl {
        width: 69%;
        flex-shrink: 0;
    }

    .boxr {
        width: 30%;
        flex-shrink: 0;
    }
}

.activedate {
    background-color: #3e5ff5 !important;
    color: #ffffff !important;
}

.sssjinfo {
    width: 100%;
    box-sizing: border-box;
    height: 98px;
    background-color: #3472ff;
    border-radius: 8px;
    padding: 16px 32px;
    display: flex;
    align-items: center;

    .infoitem {
        flex: 1;
        flex-shrink: 0;
        text-align: center;

        .infotop {
            font-size: 24px;
            color: #ffffff;
            margin-bottom: 10px;
        }

        .infotext {
            font-size: 16px;
            color: #ffffff;
        }
    }
}

.sssj {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 0;

    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .top_l {
            .bord {
                color: #3d3d3d;
                font-size: 16px;
                font-weight: 700;
                margin-right: 12px;
            }

            .gray {
                font-size: 12px;
                color: #9497b1;
            }
        }

        .top_r {
            width: 157px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            border: 1px solid #d1d7f3;
            border-radius: 4px;
            cursor: pointer;

            .topritem {
                height: 26px;
                line-height: 26px;
                flex: 1;
                text-align: center;
                font-size: 12px;
                color: #9eaffa;
            }
        }
    }
}

.paddingbox {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
}

.topmsg {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 13px 16px;
    height: 70px;

    img {
        width: 44px;
        height: 44px;
        border-radius: 6px;
        margin-right: 12px;
    }

    .msgtop {
        font-size: 16px;
        color: #3d3d3d;
        font-weight: 700;
    }

    .msgdetail {
        margin-top: 8px;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #9497b1;

        .line {
            width: 2px;
            height: 12px;
            margin: 0 8px;
            background-color: #9497b1;
        }
    }
}

::v-deep(.noneedborder .el-input__wrapper) {
    width: 100px;
    background-color: rgb(85 0 0 / 0%);
    border: noen;
    box-shadow: none;
    cursor: pointer;
}

::v-deep(.el-input__inner) {
    cursor: pointer;
}

::v-deep(.el-input) {
    width: 100px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 100%;
}

.tcbox {
    border-top: 1px solid #f4f4f7;
    padding-top: 0px;
    margin-top: 25px;

    .tcboxitem {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #f4f4f7;
        border-radius: 8px;
        margin-bottom: 50px;
        position: relative;

        .fkbox {
            margin-top: 16px;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .fkjetext {
                color: #9497b1;
                font-size: 14px;
            }

            .fkjenum {
                color: #ff7642;
                font-size: 26px;
                font-weight: 700;
            }
        }

        .msginfo {
            padding: 16px;
            box-sizing: border-box;
            width: 100%;

            .lablebox {
                font-size: 14px;
                display: flex;
                align-items: center;
                margin-bottom: 16px;

                .lable {
                    color: #9497b1;
                    width: 80px;
                }

                .lablecontent {
                    color: #202536;
                }
            }

            .cdmsg {
                font-size: 14px;
                color: #565868;
                margin-bottom: 16px;

                .bord {
                    font-weight: 700;
                    color: #202536;
                }
            }
        }

        .top {
            font-size: 14px;
            color: #3e5ff5;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-right: 20px;
            width: 100%;
            box-sizing: border-box;
            padding-left: 18px;
            background-color: #e6eeff;
            height: 42px;
            border-top-right-radius: 8px;
            border-top-left-radius: 8px;
            .moreimg {
                margin-left: 5px;
            }
        }

        .time {
            position: absolute;
            left: 0;
            top: -50px;
            width: 100%;
            box-sizing: border-box;
            color: #9497b1;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
        }
    }
}

.lightyellow {
    color: #ff7642;
}

.tcfooter {
    display: flex;
    align-items: center;
    justify-content: end;
}

.green {
    color: #00d679;
}

.chartsbottombox {
    font-size: 16px;
    background-color: #ebeffe;
    box-sizing: border-box;
    padding: 10px 30px;
}

.messageselect {
    display: flex;
    align-items: center;
    // :deep(.el-input__wrapper) {
    //     border: none !important;
    //     box-shadow: none !important;
    // }
    // :deep(.el-select--large:hover) {
    //     box-shadow: none !important;
    //     border: none !important;
    // }
    // :deep(.el-select .el-input.is-focus .el-input__wrapper) {
    //     box-shadow: none !important;
    //     border: none !important;
    // }
    // :deep(.el-input__inner) {
    //     width: 100px;
    // }
}
.dark {
    color: #9497b1 !important;
}
</style>
